<template>
  <div class="converter">
    <div class="input-container">
      <label for="decimalInput">十进制输入:</label>
      <input id="decimalInput" type="number" v-model="decimalValue" @input="convertFromDecimal">
    </div>

    <div class="output-container">
      <div class="output-item">
        <label>二进制:</label>
        <input type="text" :value="binaryValue" readonly>
      </div>
      <div class="output-item">
        <label>八进制:</label>
        <input type="text" :value="octalValue" readonly>
      </div>
      <div class="output-item">
        <label>十六进制:</label>
        <input type="text" :value="hexadecimalValue" readonly>
      </div>
      <div class="output-item">
        <label>三十二进制:</label>
        <input type="text" :value="base32Value" readonly>
      </div>
    </div>
    <div>
      <h1>介绍</h1>
      <p>
        这是一款功免费的在线工具，可以用来解决许多实际问题。它包含了二进制、八进制、十进制、十六进制、三十二进制等多种进制转换。

进制也就是进位计数制，是人为定义的带进位的计数方法。 对于任何一种进制：X进制，就表示每一位置上的数运算时都是逢X进一位。 十进制是逢十进一，十六进制是逢十六进一，二进制就是逢二进一，以此类推，x进制就是逢x进位。
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      decimalValue: '',
      binaryValue: '',
      octalValue: '',
      hexadecimalValue: '',
      base32Value: '',
    };
  },
  methods: {
    convertFromDecimal() {
      const value = Number(this.decimalValue);
      this.binaryValue = value.toString(2);
      this.octalValue = value.toString(8);
      this.hexadecimalValue = value.toString(16).toUpperCase();
      this.base32Value = this.decimalToBase32(value);
    },
    decimalToBase32(decimalValue) {
      const base32Chars = '0123456789ABCDEFGHIJKLMNOPQRSTUV';
      let result = '';
      while (decimalValue > 0) {
        result = base32Chars[decimalValue % 32] + result;
        decimalValue = Math.floor(decimalValue / 32);
      }
      return result;
    }
  }
};
</script>

<style scoped>
.converter {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 调整对齐方式 */
  margin: 20px;
}

.input-container {
  width: 45%; /* 占据整个宽度 */
  margin-bottom: 30px;
}

.input-container label {
  display: block;
  margin-bottom: 5px;
}

.input-container input {
  width: calc(100% - 16px); /* 调整输入框宽度 */
  padding: 8px;
  font-size: 16px;
  border-radius: 10px; /* 设置圆角 */
}

.output-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 调整输出框之间的间距 */
}

.output-item {
  width: 45%; /* 调整输出框宽度 */
  margin-bottom: 30px;
}

.output-item label {
  display: block;
  margin-bottom: 5px;
}

.output-item input {
  width: calc(100% - 16px); /* 调整输出框宽度 */
  padding: 8px;
  font-size: 16px;
  border-radius: 10px; /* 设置圆角 */
}
</style>
